<script setup lang="ts">
//
</script>

<template>
  <view class="index">
    <uni-card is-full :is-shadow="false">
      <text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
    </uni-card>
    <uni-section title="基础用法" type="line" padding>
      <view class="example-body">
        <uni-badge class="uni-badge-left-margin" text="1" />
        <uni-badge class="uni-badge-left-margin" text="2" type="primary" />
        <uni-badge class="uni-badge-left-margin" text="34" type="success" />
        <uni-badge class="uni-badge-left-margin" text="45" type="warning" />
        <uni-badge class="uni-badge-left-margin" text="123" type="info" />
      </view>
    </uni-section>
    <uni-section title="无底色" type="line" padding>
      <view class="example-body">
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
      </view>
    </uni-section>
  </view>
</template>

<style lang="scss">
//
</style>
